// view.js   vue视图模板
module.exports = {
  vueTemplate: options => {
    return `<template>
  <div class="${options.componentName}">
    <!-- 内容组件 -->
    <content-template :formData="formData"
                      :searchData="searchData"
                      :tableData="tableData"
                      :getDatas ="getDatas"
                      @handleSubmit="handleSubmit">
    </content-template>
    <!-- 弹框组件 -->
    <dialog-template
            :options = "formData.options.hasAdd">
            <!-- 表单组件 -->
        <form-template
            :formData="formData"
            :options="formData.options.hasAdd"
            :formValidate="formData.formValidate"
            :rules="formData.ruleValidate"
            :list="formData.list"
            @handleSubmit="handleSubmit"
        >             
        </form-template>
    </dialog-template>
  </div>
</template>
<script>
export default {
   data() {
    return {
      formData:{
        index:'',
        options:{
          hasAdd:{  //需不需要新增按钮——为空时不显示
            modal: false,        //弹框状态
            isedit: false,       //是否是编辑状态
            title:'管理员' ,      //弹框标题
            width:800,           //弹框宽度
            class:"dialogClass", //弹框类名
            zIndex:100,          //弹框层级
            loading:true,        //弹框加载圈

            formValidate: {    //获取的表单数据
              manager_name: '', 
              account: '',
              image:'',
              video:'',
              password: '',
            },
            ruleValidate: {    //验证表单信息
              manager_name: [
                {required: true, message: '请填写名字', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请填写密码', trigger: 'blur' },
                { type: 'string', min: 6, message: '至少六位数字或字母', trigger: 'blur' }
              ],
            },
          },
          hasSelect:{
            selectList:[
               {
                status:'',
                selectData:[
                    {
                      value: '全部',
                      label: '全部',
                      id:""
                    },
                    {
                      value: '下拉1',
                      label: '下拉1',
                      id:1
                    },
                    {
                      value: '下拉2',
                      label: '下拉2',
                      id:2
                    },
                ],
               },
               {
                status:'',
                selectData:[
                    {
                      value: '全部',
                      label: '全部',
                      id:""
                    },
                    {
                      value: '下拉1',
                      label: '下拉1',
                      id:1
                    },
                    {
                      value: '下拉2',
                      label: '下拉2',
                      id:2
                    },
                ],
               },
               {
                status:'',
                selectData:[
                    {
                      value: '全部',
                      label: '全部',
                      id:""
                    },
                    {
                      value: '下拉1',
                      label: '下拉1',
                      id:1
                    },
                    {
                      value: '下拉2',
                      label: '下拉2',
                      id:2
                    },
                ],
               },
               {
                status:'',
                selectData:[
                    {
                      value: '全部',
                      label: '全部',
                      id:""
                    },
                    {
                      value: '下拉1',
                      label: '下拉1',
                      id:1
                    },
                    {
                      value: '下拉2',
                      label: '下拉2',
                      id:2
                    },
                ],
               },
            ]
          }       
        },
        list: [ //表单列表——进行一些表单操作
          // {
          //    type: 表单类型,
          //    label: 表单标题，
          //    prop:表单下标指引，要对应formValidate的字段
          //    formStyle:自定义表单的样式
          //    value:传入自定义数据
          // }
          {
            type: "custom", //自定义表单
            formArray:[
              {
                slot: "one", //插槽名
                prop: "manager_name",
                label: "自定义表单1",
                placeholder:"",
                value:'',
              },
              {
                slot: "twe", 
                prop: "manager_name",
                label: "自定义表单2",
                placeholder:"",
                value:'',
              },
            ]      
          },
          {
            type: "input",       
            prop: "manager_name",
            label: "名字",
            placeholder:"",
            value:''
          },
          {
            type: "uploadImg",      
            prop: "image",
            label: "上传图片",
            formStyle:"width:100px;height:100px"
          },
          {
            type: "uploadVideo",      
            prop: "video",
            label: "上传视频",
            formStyle:"width:100px;height:100px"
          },
          {
            type: "input",
            prop: "password",
            inputtype:"password",
            label: "密码",
            placeholder:"至少六位数字或字母",
            value:''
          }
        ],
      },
      searchData:{  
        searchValue: {  //搜索值
          manager_name: '',
          account: '',
        },
        searchColumns: [ //搜索条件和搜索数量——不传则没有
          {
            key: 'manager_name',
            label: "名字",
          },
        ]
      },
      tableData:{  //表格数据及操作
        columns: [
          {
            title: '名字',
            key: 'manager_name',
            align: 'center',
          },
          {
            title: '创建时间',
            key: 'create_time',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 200,
            align: 'center',
            render: (h, params) => {
              let status = params.row.status
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.edit(params.index)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type:
                     status == 1
                      ? 'warning'
                      : status == 2
                      ? 'success'
                      : 'info',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.changeStatus(params.index)
                    }
                  }
                },
                status == 1
                ? '禁用'
                : status == 2
                ? '启用'
                : '未知'
                ),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.deletes(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          }
        ],
        data: [], //表格数据
        total:0,  //表格数据总量
        page:1,   //表格数据页码
        per_page:10,  //表格一页显示几条数据
        loading: true, //表格数据预加载
      }
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    getDatas(){
      let params = {
        page:this.tableData.page,
        per_page:this.tableData.per_page,
        manager_name:this.searchData.searchValue.manager_name,
        select1:this.formData.options.hasSelect.selectList[0].status,
        select2:this.formData.options.hasSelect.selectList[1].status,
        select3:this.formData.options.hasSelect.selectList[2].status,
      }
      this.$api.get${options.componentName}(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.tableData.data = res.data.data
              this.tableData.total = res.data.total
              this.tableData.loading = false
          }
      })
    },
    changeStatus(index){
      let status = "";
      let text = "";
      switch( this.tableData.data[index].status){
        case 1:
          text = "禁用"
          status = 2
          break;
        case 2:
          text = "启用"
          status = 1
          break;
        default:
          console.log('其他')
      };
      let params = {
        manager_id: this.tableData.data[index].manager_id,
        status: status
      }
      this.$api.status${options.componentName}(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success( text + '成功');
              this.getDatas();
            }
      })
    },
    edit(index){
      this.formData.index = index;
      this.formData.options.hasAdd.formValidate = {
        manager_name: this.tableData.data[index].manager_name,
        password: this.tableData.data[index].password,
      };
      this.formData.options.hasAdd.isedit = true
      this.formData.options.hasAdd.modal = true
    },
    deletes(index){
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除该管理员吗?',
        onOk: () => {
          let params = {
            manager_id : this.tableData.data[index].manager_id
          }
          this.$api.deletes${options.componentName}(params).then(res => {
            console.log(res);
            if (res.code == 200) {
              this.$Message.success('删除成功');
              this.getDatas();
            }
          })
        }
      })
    },
    handleSubmit(value){
      if ( this.formData.options.hasAdd.isedit == true) {
        let params = {
          manager_id :  this.tableData.data[this.formData.index].manager_id,
          manager_name: this.formData.options.hasAdd.formValidate.manager_name,
          password:     this.formData.options.hasAdd.formValidate.password,
        };
        this.$api.edit${options.componentName}(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.formData.options.hasAdd.modal = false;
              this.$Message.success('修改成功');
              this.getDatas();
            }
        })
      }else{
        let params = {
          manager_name: this.formData.options.hasAdd.formValidate.manager_name,
          password:     this.formData.options.hasAdd.formValidate.password,
        }
        this.$api.create${options.componentName}(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.formData.options.hasAdd.modal = false;
              this.$Message.success('添加成功');
              this.getDatas();
            }
        })
      }
    },
  },
  components: {

  }
}
</script>
<style lang="less" scoped>
    @import './${options.viewName}.less';
</style>
`
  },
  entryTemplate: `import Main from './main.vue'
export default Main`
}

